
 <template>
  <div
    class="w-full"
    type="button"
    aria-haspopup="dialog"
    aria-expanded="false"
    aria-controls="radix-:R7jkkuiiklj5:"
    data-state="closed"
  >
    <div class="relative flex h-full max-w-full flex-1 flex-col">
      <div class="group relative flex w-full items-center">
        <div class="w-full">
          <div
            id="composer-background"
            class="flex w-full cursor-text flex-col rounded-3xl px-2.5 py-1 transition-colors contain-inline-size bg-[#f4f4f4] dark:bg-token-main-surface-secondary"
            style="view-transition-name: var(--vt-composer)"
          >
            <div class="flex min-h-[44px] items-start pl-2">
              <div class="min-w-0 max-w-full flex-1">
                <div
                  class="_prosemirror-parent_cy42l_1 text-token-text-primary max-h-[25dvh] max-h-52 overflow-auto default-browser"
                >
                  <div
                    contenteditable="true"
                    translate="no"
                    class="ProseMirror"
                    id="prompt-textarea"
                    data-virtualkeyboard="true"
                    @input="onTextInput"
                  >
                    <p
                      :data-placeholder="'给“' + model + '”发送消息'"
                      class="placeholder"
                    ></p>
                  </div>
                </div>
              </div>
              <div class="w-[32px] pt-1"></div>
            </div>
            <div class="flex h-[44px] items-center justify-between">
              <div class="flex gap-x-1 text-token-text-primary">
                <!-- BtnAttachment.vue 附件相关 -->
              </div>
              <div class="flex gap-x-1">
                <!-- 对话中 -->
                <div v-if="status==='working'">
                  <button
                    aria-label="停止流式传输"
                    data-testid="stop-button"
                    class="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary bg-black text-white dark:bg-white dark:text-black disabled:bg-[#D7D7D7]"
                  >
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon-lg"
                    >
                      <rect
                        x="7"
                        y="7"
                        width="10"
                        height="10"
                        rx="1.25"
                        fill="currentColor"
                      ></rect>
                    </svg>
                  </button>
                </div>
                <!-- 等待对话 -->
                <span v-else class="" data-state="closed">
                  <button
                    :disabled="txtInput.length === 0"
                    aria-label="发送提示"
                    data-testid="send-button"
                    @click="onSendClick"
                    class="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary bg-black text-white dark:bg-white dark:text-black disabled:bg-[#D7D7D7]"
                  >
                    <svg
                      width="32"
                      height="32"
                      viewBox="0 0 32 32"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="icon-2xl"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M15.1918 8.90615C15.6381 8.45983 16.3618 8.45983 16.8081 8.90615L21.9509 14.049C22.3972 14.4953 22.3972 15.2189 21.9509 15.6652C21.5046 16.1116 20.781 16.1116 20.3347 15.6652L17.1428 12.4734V22.2857C17.1428 22.9169 16.6311 23.4286 15.9999 23.4286C15.3688 23.4286 14.8571 22.9169 14.8571 22.2857V12.4734L11.6652 15.6652C11.2189 16.1116 10.4953 16.1116 10.049 15.6652C9.60265 15.2189 9.60265 14.4953 10.049 14.049L15.1918 8.90615Z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </button>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup >
import { ref } from "vue";
const props = defineProps({
  model: String, // 使用模型
  status:String //当前状态
});
const txtInput = ref("");
const onTextInput = (e) => {
  if (e.target.textContent.length === 0) {
    e.target.innerHTML = `<p data-placeholder="给“${props.model}”发送消息" class="placeholder"></p>`;
    txtInput.value = "";
    return;
  } else {
    e.target.firstChild.removeAttribute("data-placeholder");
    e.target.firstChild.removeAttribute("class");
  }
  txtInput.value = e.target.textContent;
};
const onSendClick = () => {
  console.log(txtInput.value);
  document.getElementById(
    "prompt-textarea"
  ).innerHTML = `<p data-placeholder="给“${props.model}”发送消息" class="placeholder"></p>`;
  txtInput.value = "";
  return;
};
</script>
<style lang="scss" scoped>
</style>